<template>
  <div class="front-java">
    <el-card>
      <div class="front-end">前端与java学科试题走势图</div>
      <el-tabs v-model="tabName" class="tabFrontJava" @tab-click="handleClick">
        <el-tab-pane label="前端学科" name="0" :lazy="true"></el-tab-pane>
        <el-tab-pane label="JAVA学科" name="1" :lazy="true"></el-tab-pane>
      </el-tabs>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="16">
          <div class="chart">
            <div id="front-java" style="height:300px;"></div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="8">
          <div class="table">
            <h4>学科试题数量排名</h4>
            <ul>
              <li>
                <el-row class="row">
                  <el-col :span="3">
                    <div class="circular">1</div>
                  </el-col>
                  <el-col :span="16">前端</el-col>
                  <el-col :span="5">5,234</el-col>
                </el-row>
              </li>
              <li>
                <el-row class="row">
                  <el-col :span="3">
                    <div class="circular">2</div>
                  </el-col>
                  <el-col :span="16">java</el-col>
                  <el-col :span="5">3,210</el-col>
                </el-row>
              </li>
              <li>
                <el-row class="row">
                  <el-col :span="3">
                    <div class="circular">3</div>
                  </el-col>
                  <el-col :span="16">大数据</el-col>
                  <el-col :span="5">1,294</el-col>
                </el-row>
              </li>
              <li>
                <el-row class="row">
                  <el-col :span="3">
                    <div class="light">4</div>
                  </el-col>
                  <el-col :span="16">C++</el-col>
                  <el-col :span="5">1,001</el-col>
                </el-row>
              </li>
              <li>
                <el-row class="row">
                  <el-col :span="3">
                    <div class="light">5</div>
                  </el-col>
                  <el-col :span="16">UI</el-col>
                  <el-col :span="5">934</el-col>
                </el-row>
              </li>
              <li>
                <el-row class="row">
                  <el-col :span="3">
                    <div class="light">6</div>
                  </el-col>
                  <el-col :span="16">php</el-col>
                  <el-col :span="5">856</el-col>
                </el-row>
              </li>
              <li>
                <el-row class="row">
                  <el-col :span="3">
                    <div class="light">7</div>
                  </el-col>
                  <el-col :span="16">python</el-col>
                  <el-col :span="5">403</el-col>
                </el-row>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
// 1. 导入 echarts
import * as echarts from 'echarts'
export default {
  name: 'frontJava',
  components: {},
  watch: {},
  props: {},
  data() {
    return {
      tabName: '0'
      // index: 0
    }
  },
  computed: {},
  created() {},
  mounted() {
    var myChart = echarts.init(document.getElementById('front-java'))
    var option = {
      dataset: [
        {
          source: [
            ['product', 'amount'],
            [100, '1月'],
            [120, '2月'],
            [161, '3月'],
            [134, '4月'],
            [105, '5月'],
            [160, '6月'],
            [165, '7月'],
            [100, '8月'],
            [120, '9月'],
            [161, '10月'],
            [134, '11月'],
            [105, '12月']
          ]
        },
        {
          source: [
            ['product', 'amount'],
            [200, '1月'],
            [192, '2月'],
            [120, '3月'],
            [144, '4月'],
            [166, '5月'],
            [130, '6月'],
            [140, '7月'],
            [199, '8月'],
            [156, '9月'],
            [179, '10月'],
            [100, '11月'],
            [120, '12月']
          ]
        }
      ],
      // color: ['#00f2f1', '#ed3f35'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross' // 'shadow' as default; can also be 'line' or 'shadow'
        },
        backgroundColor: 'rgba(0, 0, 0, 0.4)',
        textStyle: {
          color: '#fff'
        }
      },
      legend: {
        // 距离容器10%
        right: '10%'
      },
      grid: {
        top: '20%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        borderColor: '#1191d0',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        // 去除刻度
        axisTick: {
          alignWithLabel: true,
          // 把x轴的刻度隐藏起来
          show: false
        },
        // 修饰刻度标签的颜色
        axisLabel: {
          color: '#008acd'
        },
        // x轴这条线的颜色样式
        axisLine: {
          // show: true,
          lineStyle: {
            color: '#2f9fd5',
            width: 1.5
          }
        }
      },
      lineStyle: {
        color: '#3d8afa'
      },
      yAxis: {
        type: 'value',
        splitArea: {
          show: true
        },
        // 去除刻度
        axisTick: {
          alignWithLabel: true
          // show: false
        },
        // 修饰刻度标签的颜色
        axisLabel: {
          color: '#249ad4'
        },
        // y轴这条线的颜色样式
        axisLine: {
          show: true,
          lineStyle: {
            color: '#2f9fd5',
            width: 1.5
          }
        }
      },
      series: [
        {
          datasetIndex: String(this.tabName),
          // 折线bar是柱形
          type: 'line',
          showBackground: true,
          // stack: 'vistors',
          // 折线为弧形
          smooth: true,
          encode: {
            // 将 "amount" 列映射到 X 轴。
            x: 'amount',
            // 将 "product" 列映射到 Y 轴。
            y: 'product'
          }
        }
      ]
    }
    // 使用刚指定的配置项和数据显示图表。

    myChart.setOption(option)
    // 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener('resize', function() {
      // 让我们的图表调用 resize这个方法
      myChart.resize()
    })
  },
  methods: {
    handleClick(tab) {
      // console.log(tab)
      // console.log(event)
      this.tabName = tab.index
      this.$nextTick(() => {
        this.tabName = tab.index
      })
    }
  }
}
</script>
<style lang="less">
.front-java {
  margin-top: -8px;
  position: relative;
  /deep/ .tabFrontJava {
    .van-tabs__line {
      bottom: 8px;
      width: 31px !important;
      height: 8px;
      background-color: #3296fa;
    }
  }

  .front-end {
    position: absolute;
    top: 20px;
    right: 20px;
    color: rgb(153, 153, 153);
  }
  .chart {
    widows: 100%;
    height: 300px;
    margin-top: -28px;
  }
  .table {
    // color: rgba(0,0,0,.65);
    h4 {
      color: #000;
      font-weight: 500;
    }
    ul {
      list-style: none;
      margin: 0px;
      padding: 0px;
      .row {
        margin-bottom: 10px;
      }
    }
    .circular {
      width: 20px;
      height: 20px;
      background-color: #314659;
      color: #fff;
      text-align: center;
      font-size: 12px;
      line-height: 20px;
      font-weight: 600;
      border-radius: 50%;
    }
    .light {
      width: 20px;
      height: 20px;
      text-align: center;
      font-size: 12px;
      line-height: 20px;
      font-weight: 600;
      border-radius: 50%;
      background-color: #f5f5f5;
      color: rgba(0, 0, 0, 0.65);
    }
  }
}
</style>
